{% extends "jarvis/base.html" %}

{% block content %}

 <script type="text/javascript">
  function toggleLight(area_name, device_name, value)
  {
  $.ajax({
      url: '/jarvis/areas/'+area_name+'/'+device_name+'/set/'+value,
    });   
  }
</script>

 <ul data-role="listview">
   <li data-role="list-divider">Area</li>
   <li>&emsp;{{area.area_name}}</li>
   <li data-role="list-divider">Device</li>
   <li>&emsp;{{device.device_name}}</li>
   <li data-role="list-divider">Code</li>
   <li>&emsp;{{area.house_code}}{{device.device_code}}</li>
   <li data-role="list-divider">Status</li>
   <li>&emsp;
     <select name="toggleSwitch" area="{{area.area_name}}" device="{{device.device_name}}" id="toggleSwitch" data-role="slider" status="{{device.enabled}}">
       <option value="off">Off</option>
       <option value="on" {% if device.enabled %} selected {% endif %}>On</option>
     </select>
   </li>
</ul>

<script type="text/javascript">
$( "select[name*='toggle']").on( "slidestop", function(event, ui) {
    device = $(this).attr("device");
    area = $(this).attr("area");
    if( (!$(this).attr("status") && $(this).val() == "on" )
        || ($(this).attr("status") && $(this).val() == "off"))
    {
      toggleLight(area, device, $(this).val());
      $(this).attr("status", !$(this).attr());
    }
    toggleLight(area, device, $(this).val());

});

</script>


{% endblock%}
